<template>
  <div id="userDynamicList" v-if="props.post">
    <div  ref="container" @click="toDetails(post.id)">
      <div class="image">
        <div v-for="photo in post.photos">
          <van-image :src=photo width="200px"
                     height="280px"
          />
        </div>
      </div>
      <div class="title">
        <div style="font-size: 14px;text-align: center">{{ post.title }}</div>
      </div>
      <div class="footer1">
        <van-image :src="post.user.userAvatar" round
                   width="30px" height="30"
                   style="position: relative;left: 1vw;top: 0.5vh;"
        />
        <span style="position: relative;top: -0.5vh;left: 3vw;">{{ post.user.userName }}</span>
        <span style="position: relative;left: 6vw;" id="small-btn">
          <van-icon :name="post.hasThumb ? 'good-job' : 'good-job-o'" size="20"
                  @click="addThumb(post)">{{ post.thumbNum }}</van-icon>
        </span>
        <span id="small-btn" style="position: relative;left: 8vw;">
          <van-icon :name="post.hasFavour ? 'star' : 'star-o'" size="20" @click="addFavour(post)"></van-icon>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {ImagePreview} from "vant";
import myAxios from "../plugins/myAxios";
import {useRoute, useRouter} from "vue-router";


const container = ref(null)
const props = defineProps({
  post: Object,
})
// console.log(props.post)
const emit = defineEmits(['send-data']);

const router = useRouter();
const route = useRoute();


const showPreview = (url: any) => {
  ImagePreview([url]);
}

const addThumb = (post: Object) => {
  if (post.hasThumb) {
    post.thumbNum--
    post.hasThumb = false
  } else {
    post.thumbNum++
    post.hasThumb = true
  }

  myAxios.post('/post_thumb/', {
    postId: post.id
  })
}
const addFavour = (post: Object) => {
  if (post.hasFavour) {
    post.favourNum--
    post.hasFavour = false
  } else {
    post.favourNum++
    post.hasFavour = true
  }

  myAxios.post('/post_favour/', {
    postId: post.id
  })
}

const sendData = () => {
  const data = true;
  emit('send-data', data)
}

const toDetails = (postId: number) => {
  router.push({
    path: '/social/info',
    query: {
      postId
    }
  })
}
</script>

<style scoped>
#userDynamicList {
  height: 430px;
  width: 100vw;
  position: relative;
  left: 25vw;
  top: 2vh;
}

.image {
  width: 200px;
  height: 280px;
}

.title {
  width: 200px;
  height: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  line-height: 40px;
  margin-top: 2px;
  background-color: rgba(0, 0, 0, 0.08);
}

.footer1 {
  width: 200px;
  height: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.08);
}

#small-btn {
  margin-top: 8px;
  font-size: 1px;
}
</style>
